<template>
  <div style="background: var(--el-bg-color-page); min-height: calc(100vh - 50px)">
    <header-manage :platform="platform" :form-data="formData" class="p10px" @edit="onPlatformEdit" />
    <div class="p10px">
      <!--      数据看板-->
      <el-row v-if="platform.details" :gutter="10">
        <el-col v-for="(item, key) in platform.details.count" :key="key" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <num-data-card :title="item.title" :number="item.number" :img="countDataImg[key]" />
        </el-col>
      </el-row>
      <el-row v-if="!defaultApp.version" :gutter="10">
        <el-col :span="24">
          <el-card shadow="never">
            <el-steps :active="active" align-center simple finish-status="success">
              <el-step v-for="(item, key) in steps" :key="key" :title="item.label" class="cursor-pointer" @click="active = key" />
            </el-steps>
          </el-card>
          <el-card class="bg-white mt-10px" shadow="never">
            <h3>{{ steps[active].label }}</h3>
            <div class="mt-10px flex items-center justify-between">
              <p>{{ steps[active].desc }}</p>
              <el-button
                v-if="steps[active].path"
                type="primary"
                plain
                @click="router.push({ path: steps[active].path, query: route.query })"
                >前往</el-button
              >
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row v-else :gutter="10">
        <el-col :span="24">
          <el-card shadow="never">
            <el-empty />
          </el-card>
        </el-col>
      </el-row>
    </div>
    <dk-form ref="editForm" :form-data="formData" :is-dialog="true" top="5vh" @submit="getPlatform" />
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getPlatform } from '@/api/platform'
import { getAppEditForm } from '@/api/platform/app'
import HeaderManage from '@/views/platform/components/common/headerManage.vue'
import NumDataCard from '@/views/platform/components/common/numDataCard.vue'
import { getPlaid } from '@/utils/auth'

import userIcon from '@/assets/icon/user.png'
import orderIcon from '@/assets/icon/order.png'
import refundIcon from '@/assets/icon/refund.png'
import transferIcon from '@/assets/icon/transfer.png'

defineOptions({
  name: 'AppIndex'
})

const router = useRouter()
const route = useRoute()
const defaultApp = inject('defaultApp')

const active = ref(0)
const platform = ref({
  details: {
    count: null,
    setting: null
  }
})
const steps = ref([
  {
    label: '添加应用',
    desc: '应用管理-全部应用-新增应用，然后配置相关的小程序图标、名称以便区分不同的小程序应用，同时可以勾选首页和菜单显示，更加方便的跳转到对应小程序控制台',
    path: '/app/addon'
  },
  { label: '服务端配置', desc: '完善基础设置后，到系统设置中，选择服务端设置，按照说明填写相关表单即可。', path: '/app/setting' },
  {
    label: '上传配置',
    desc: '完善上传配置，将前面的配置项都配置后，即可完善上传设置，根据上传设置中的内容去完善即可。',
    path: '/app/setting'
  },
  {
    label: '上传审核',
    desc: '上传审核，检查当前小程序是否有新版本可以提交更新，如果首次上传没有成功可以点击重新上传，上传后，将会在官方小程序后台查看，提交审核即可。',
    path: '/app/upload'
  },
  { label: '完成', desc: '如果配置完后，可以点击进入小程序控制台', path: '' }
])
const formData = ref(null)
const countDataImg = {
  user: userIcon,
  order: orderIcon,
  refund: refundIcon,
  transfer: transferIcon
}
const plaid = ref(0)
const editForm = ref(null)

onMounted(() => {
  console.log('---------', defaultApp)

  plaid.value = getPlaid()
  getPlatformData()
})

// 获取应用基本信息
const getPlatformData = () => {
  getPlatform(plaid.value)
    .then((res) => {
      platform.value = res.data
    })
    .catch(() => {
      router.push({ path: '/platform/list' })
    })
}

// 编辑应用
const onPlatformEdit = () => {
  getAppEditForm(platform.value.plaid).then((res) => {
    formData.value = res.data
    editForm.value.show()
  })
}
</script>

<style scoped>
.app-manage :deep(.el-col) {
  @apply mb-10px;
}

.platform_auth .el-tag {
  @apply m-2px mx-10px;
}

.box-card :deep(.el-card__body) {
  @apply overflow-auto;
}
</style>
